<template>
	<view class="goodsrebate">
		<u-navbar title=" " :back-icon-size="28" back-icon-color="#ffffff" :border-bottom="false" :background="{ background: '#F03F3F' }"></u-navbar>
		<view class="bgc"></view>
		<view class="rebte_main">
			<view class="rebte_top">
				<text class="title">省钱</text>
				<view class="u-m-t-8" style="margin:0 auto;"><text class="titlehelper">你购物，我补贴!</text></view>
			</view>
			<view class="searchipt">
				<u-search
					placeholder="手机壳 | 洗发水 | 内衣"
					v-model="keyword"
					shape="square"
					isiconshow="none"
					action-text="搜券"
					:height="68"
					:input-style="{ height: '68rpx' }"
					:action-style="searchsty"
					@search="dosearch"
					@custom="dosearch"
				></u-search>
			</view>
			<view class="hotgoods">
				<view class="hot_top u-m-l-22 u-p-t-20">
					<u-icon name="gift" :size="40"></u-icon>
					<text class="u-p-l-18">热门商品</text>
				</view>
				<view class="goodsbox">
					<block v-for="(item, index) in hotgoods" :key="index">
						<view class="goodsli">
							<u-image :border-radius="16" width="200rpx" height="200rpx" :src="item.pict_url" @click="gogoodsinfo(item)"></u-image>
							<view class="hot_right">
								<view class="right_top">
									<text class="tag">热门</text>
									<text class="u-line-1 goods_title" @click="gogoodsinfo(item)">{{ item.title }}</text>
								</view>
								<view class="shop">{{ item.shop_title }}</view>
								<view class="platform">
									<view class="littleplatform">{{ item.user_type == 1 ? '天猫' : '淘宝' }} ￥{{ item.reserve_price }}</view>
									<view class="coupon" v-if="item.coupon_amount != ''" @click="getcoupon(item.coupon_share_url)">{{ item.coupon_amount }}元劵</view>
									<view class="butie">补贴{{ item.money }}</view>
								</view>
								<view class="sales">
									<view class="sales_left">
										<text class="hotone">到手价</text>
										<view class="endprice">
											￥
											<text class="u-font-18">{{ item.zk_final_price }}</text>
										</view>
									</view>
									<view class="sales_right">
										<view>
											已抢
											<text>{{ item.tk_total_sales }}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
export default {
	name: 'haha',
	data() {
		return {
			mpbarheight: this.statusBarHeight,
			keyword: '',
			searchsty: {
				width: '118rpx',
				height: '68rpx',
				lineHeight: '68rpx',
				backgroundColor: '#FFDB28',
				borderTopRightRadius: '10rpx',
				borderBottomRightRadius: '10rpx',
				margin: '0',
				color: '#ffffff'
			},
			hotgoods: [
				// {
				// 	item_id: 576475157528, //商品id
				// 	pict_url: 'https://img.alicdn.com/bao/uploaded/i3/797362626/O1CN01IFgyd81VGkhIdzQa1_!!0-item_pic.jpg', //商品主图
				// 	title: '2020年新款反季轻薄宽圆领羽绒服女保暖内胆短款外套秋冬女装无领', //标题
				// 	shop_title: '麦酷麦库旗舰店', //店铺名称
				// 	user_type: 1, //店铺类型（天猫，淘宝）
				// 	reserve_price: '299', //原价
				// 	zk_final_price: '109.9', //卷后价
				// 	tk_total_sales: '567', //销量
				// 	coupon_share_url:
				// 		'//uland.taobao.com/coupon/edetail?优惠卷地址e=c7p1q%2FaVhosNfLV8niU3RxrSI%2FOabn6qNg4Gqf8CT4AKuDLwELihnUdSPzAkgbjde%2FLs5MnnUzR64JewJRWx%2F2qulQl923jbc0aeblGjHeoQzju3KstaoUeSZgfE%2Bo1d%2Bgbu282mGh%2B3GXpSbfs48pwPDYCBUNbotX3SO%2BNRny5h%2FrazpsTK3%2B2EH9ZkW0infjHMNTxsYKQCGruttYDvNg%3D%3D&&app_pvid=59590_11.132.118.167_614_1602661928720&ptl=floorId:2836;app_pvid:59590_11.132.118.167_614_1602661928720;tpp_pvid:100_11.139.248.194_4961_7191602661928722673&xId=5j8xxZWxs2e2bJmDQaSTZwdQmmwQt0VTKvfguLW6OJYQhlkMZ42jM1iJXbxDrfg9TOcXMbITjNU782MVSVF0mY8PZJDSuNEKkDcYMQaobRiP&union_lens=lensId%3AMAPI%401602661928%400b8476a7_0ea8_17526184f5e_cf30%4001',
				// 	coupon_amount: '40', //优惠卷面值
				// 	money: 994.05 //补贴金额（券后价*佣金比例*系统用户分成比例）
				// }
			]
		};
	},
	//实例创建完成后被立即调用
	created() {},
	onLoad(option) {},
	//挂载开始之前被调用
	beforeMount() {},
	onPullDownRefresh() {
		//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		console.log('refresh');
		setTimeout(function() {
			uni.stopPullDownRefresh(); //停止下拉刷新动画
		}, 1000);
	},
	//初次渲染完成
	onReady() {
		this.dorebaterel();
	},
	//全局只触发一次
	onLaunch() {},
	//从后台进入前台
	onShow() {},
	//前台进入后台
	onHide() {},
	methods: {
		dorebaterel() {
			this.$u.api
				.dorebaterel({
					search: '热门商品'
				})
				.then(res => {
					console.log(res);
					if (res.code == 200) {
						this.hotgoods = res.data;
					}
				})
				.catch(err => {
					console.log(err);
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error'
					});
				});
		},
		getcoupon(url) {
			// #ifdef APP-PLUS
			plus.runtime.openURL(url);
			// #endif
			// #ifdef H5
			window.open(url);
			// #endif
		},
		gogoodsinfo(item) {
			uni.navigateTo({
				url: '/pages/goodsrebate/goodsinfo/goodsinfo?item=' + encodeURIComponent(JSON.stringify(item)),
				animationType: 'pop-in',
				animationDuration: 300
			});
		},
		dosearch() {
			console.log(this.keyword);
			uni.navigateTo({
				url: '/pages/goodsrebate/search/search?search=' + this.keyword,
				animationType: 'pop-in',
				animationDuration: 300
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.goodsrebate {
	position: relative;
	.bgc {
		position: absolute;
		/* top: var(--status-bar-height); */
		width: 100%;
		height: 414rpx;
		background-color: #f03f3f;
	}
	.rebte_main {
		position: absolute;
		width: 100%;
		.rebte_top {
			padding-top: 54rpx;
			text-align: center;
			.title {
				font-size: 56rpx;
				color: white;
				margin: 0 auto;
			}
			.titlehelper {
				font-size: 28rpx;
				color: #dfdfdf;
			}
		}
		.searchipt::v-deep {
			width: 684rpx;
			margin: 0 auto;
			margin-top: 54rpx;
			.u-content {
				border-top-right-radius: 0 !important;
				border-bottom-right-radius: 0 !important;
			}
			.uni-input-placeholder {
				left: 0rpx;
			}
			.uni-input-input {
				text-indent: 0rpx;
			}
		}
		.hotgoods {
			background-color: #ffffff;
			border-radius: 20rpx 20rpx 0 0;
			margin-top: 42rpx;
			.hot_top {
				display: flex;
				// justify-content: flex-start;
				align-items: center;
			}
			.goodsbox {
				min-height: 500rpx;
				.goodsli {
					display: flex;
					justify-content: space-around;
					align-items: center;
					margin-top: 32rpx;
					.hot_right {
						.right_top {
							display: flex;
							align-items: center;
							.tag {
								display: inline-block;
								width: 74rpx;
								height: 38rpx;
								line-height: 38rpx;
								background-color: #fdbaba;
								text-align: center;
								border-radius: 5px;
								color: #ee0f1b;
								margin-right: 22rpx;
							}
							.goods_title {
								display: inline-block;
								width: 362rpx;
								color: #101010;
								font-size: 26rpx;
								font-weight: 600;
							}
						}
						.shop {
							color: #787882;
							font-size: 24rpx;
							padding: 10rpx 0;
						}
						.platform {
							color: #787882;
							display: flex;
							justify-content: flex-start;
							align-items: center;
							font-size: 24rpx;
							margin-bottom: 10rpx;
							.littleplatform {
								height: 40rpx;
								line-height: 40rpx;
								padding-right: 16rpx;
							}
							.coupon {
								// width: 100rpx;
								height: 40rpx;
								line-height: 40rpx;
								background-color: #ff452d;
								text-align: center;
								border-radius: 10rpx;
								color: #ffffff;
								padding: 0 10rpx;
								margin-right: 16rpx;
							}
							.butie {
								// width: 100rpx;
								height: 40rpx;
								line-height: 40rpx;
								background-color: #fdbaba;
								text-align: center;
								border-radius: 10rpx;
								color: #ee0f1b;
								padding: 0 10rpx;
							}
						}
						.sales {
							height: 50rpx;
							line-height: 50rpx;
							display: flex;
							justify-content: space-between;
							align-items: flex-end;
							.sales_left {
								display: flex;
								justify-content: flex-start;
								align-items: flex-end;
								.hotone {
									color: #ff8787;
								}
								.endprice {
									color: #ee0f1b;
									vertical-align: text-bottom;
									display: flex;
									align-items: flex-end;
								}
							}
							.sales_right {
								color: #787882;
								font-size: 24rpx;
							}
						}
					}
				}
			}
		}
	}
}
</style>
